<template>
	<div id="home">
		<el-container>
			<el-header>
				<div class="logo"></div>
				<p class="title">小青益学习空间</p>
				<div id="top-bar">
					<el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" background-color="#4474BB"
					 text-color="#fff" active-text-color="#ffd04b">
						<el-submenu index="1">
							<template slot="title">{{ username }}</template>
							<el-menu-item index="1-1" @click="loginOut">
								<i class="el-icon-switch-button" style="color: red;"></i> 退出登录
							</el-menu-item>
							<el-menu-item index="1-2">
								<i class="el-icon-edit" style="color:#FFFFFF;"></i> 修改密码
							</el-menu-item>
							<el-menu-item index="1-3">
								<i class="el-icon-s-check" style="color:#FFFFFF;"></i> 权限管理
							</el-menu-item>
						</el-submenu>
					</el-menu>
				</div>
			</el-header>
			<el-container>
				<el-aside width="200px">
					<div class="zt-Avatar">
						<el-avatar :size="70" :src="imgUrl"></el-avatar>
						<div style="padding-top: 5px;">
							<a href="javascript:" style="color: #FFFFFF;" title="编辑头像">编辑头像</a>
						</div>
					</div>
					<el-menu default-active="2" class="el-menu-vertical-demo" background-color="#4474BB" text-color="#fff"
					 active-text-color="#FFA500">
					  <el-menu-item index="1" @click="house">
					         <i class="el-icon-house"></i>
					         <span slot="title">首页</span>
					       </el-menu-item>
						<el-submenu index="2">
							<template slot="title">
								<i class="el-icon-edit"></i>
								<span>学习区</span>
							</template>
							<el-menu-item-group>
								<el-menu-item index="2-1" @click="gysp">
									<i class="el-icon-video-camera"></i> 视频中心
								</el-menu-item>
							</el-menu-item-group>
							<el-menu-item-group>
								<el-menu-item index="2-2" @click="wzzx">
									<i class="el-icon-c-scale-to-original"></i> 文章中心
								</el-menu-item>
							</el-menu-item-group>
						</el-submenu>

						<el-submenu index="3">
							<template slot="title">
								<i class="el-icon-user"></i>
								<span>个人中心</span>
							</template>
							<el-menu-item-group>
								<el-menu-item index="3-1" @click="myself">
									<i class="el-icon-medal-1"></i> 个人资料
								</el-menu-item>
							</el-menu-item-group>
							<el-menu-item-group>
								<el-menu-item index="3-2" @click="sc">
									<i class="el-icon-star-off"></i> 收藏
								</el-menu-item>
							</el-menu-item-group>
							<el-menu-item-group>
								<el-menu-item index="3-3" @click="zuji">
									<i class="el-icon-document"></i> 评论
								</el-menu-item>
							</el-menu-item-group>
							<el-menu-item-group>
								<el-menu-item index="3-4" @click="fabu">
									<i class="el-icon-s-promotion"></i> 发布
								</el-menu-item>
							</el-menu-item-group>
						</el-submenu>

						<el-submenu index="4">
							<template slot="title">
								<i class="el-icon-medal"></i>
								<span>案例</span>
							</template>
							<el-menu-item-group>
								<el-menu-item index="4-1" @click="anli">
									<i class="el-icon-moon-night"></i> 案例库
								</el-menu-item>
							</el-menu-item-group>
						</el-submenu>
						<el-submenu index="5">
							<template slot="title">
								<i class="el-icon-question"></i>
								<span>其他</span>
							</template>
							<el-menu-item-group>
								<el-menu-item index="5-1">
									<i class="el-icon-help"></i> 帮助
								</el-menu-item>
							</el-menu-item-group>
							<el-menu-item-group>
								<el-menu-item index="5-2">
									<i class="el-icon-setting"></i> 系统设置
								</el-menu-item>
							</el-menu-item-group>
						</el-submenu>
					</el-menu>
				</el-aside>
				<el-container>
					<el-main>
						<!--不让组件重复 渲染成DOM 提高性能-->
						
						<transition mode="out-in">
							<keep-alive>
								<router-view></router-view>
							</keep-alive>
						</transition>
						
						
					</el-main>
					<el-footer>
						@zhoutao版权所有2019.10.15
					</el-footer>
				</el-container>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	export default {
		name: 'index',
		data() {
			return {
				username:'请登陆！',
				activeIndex: '1',
				activeIndex2: '1',
				imgUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
			}
		},
		created() {
			/**
			 * 判断是否登录
			 */
			this.getUsername();
		},
		components: {

		},
		methods: {
            loginOut(){
				localStorage.setItem('username','');
				this.$router.push('/login')
			},
			getUsername(){
				let username = localStorage.getItem('username');
				if (!username) {
					this.$message({
						message: '您还没登录，请先登录！',
						center: true,
						type: 'warning',
						duration:2000,
						onClose: () => {
							this.$router.push('/login')
						}
					});
				
				}else{
					this.username = username
				}
			},
			house(){
				this.$router.push('/Home')
			},
			gysp() {
				this.$router.push('/shipin');
			},
			wzzx() {
				this.$router.push('/wenzahng')
			},
			myself() {
				this.$router.push('/gerenziliao')
			},
			sc() {
				this.$router.push('/shoucang')
			},
			zuji() {
				this.$router.push('/shostoryLook')
			},
			fabu() {
				this.$router.push('/fabu')
			},
			anli() {
				this.$router.push('/anli')
			}
		}
	}
</script>
<style scoped="scoped">
	.title {
		font-size: 24px;
		float: left;
		margin-left: 10px;
	}

	#top-bar {
		float: right;
	}

	#home {
		min-width: 786px;
		height: 100%;
	}

	.el-container {
		height: 100%;
	}

	.el-header,
	.el-footer {
		background-color: #4474BB;
		color: #FFFFFF;
		text-align: center;
		line-height: 60px;
	}

	.el-header {
		text-align: left;
	}

	.el-aside {
		background-color: #4474BB;
		color: #FFFFFF !important;
		text-align: left;
	}

	.el-main {
		background-color: #E9EEF3;
		color: #333;
		text-align: center;
	}

	body>.el-container {
		margin-bottom: 40px;
	}

	.el-container:nth-child(5) .el-aside,
	.el-container:nth-child(6) .el-aside {
		line-height: 260px;
	}

	.el-container:nth-child(7) .el-aside {
		line-height: 320px;
	}

	#home i {
		color: #FFFFFF !important;
	}

	.el-submenu__title i {
		color: #FFFFFF !important;
	}

	.logo {
		float: left;
		width: 100px;
		height: 60px;
		background: url(../assets/logo.png) no-repeat center;
		background-size: contain;
	}

	.zt-Avatar {
		padding-top: 20px;
		text-align: center;
		height: 120px;
		border-bottom: 1px solid #FFFFFF;
	}
</style>
